<template>
  <div class="wrap">
    <div class="leftPart">
      <div class="search m-20">
        <el-input v-model="entData.search" style="width: 100%;" type="text" prefix-icon="search" placeholder="搜索部门"/>
      </div>
      <el-tree
        ref="treeRef"
        style="max-width: 600px"
        class="filter-tree"
        :highlight-current="true"
        :node-key="entData.id"
        :data="entData.departmentList"
        :props="entData.defaultProps"
        :expand-on-click-node="false"
        :default-expanded-keys="[1]"
        :current-node-key="1"
        :filter-node-method="filterNode"
      >
        <template #default="{ node, data }">
          <div class="departmentItem" @click="clickHandle(node,data)">
            <i class="icon"></i>
            <span class="overflow">{{ node.label }}</span>
            <el-popover
            placement="top-end"
            title=""
            width=""
            trigger="click"
            content="">
             <template #reference><i class="ellipsis-col" @click.stop v-show="node.isCurrent"></i></template>
             xxx 
            </el-popover>
          </div>
        </template>
      </el-tree>
    </div>
    <div class="rightPart m-20">
      <h3 class="xl m-b-20">企业通讯录</h3>
      <div class="searchHead f-jc-sb">
        <div class="left">
          <span class="total">共 {{ entData.tableData.length }} 条</span>
          <el-input v-model="entData.search" style="width: 15rem;" class="m-l-15" type="text" prefix-icon="search" placeholder="请输入姓名/手机号"/>
        </div>
        <el-button type="primary" size="default" icon="plus" @click="">新增</el-button>
      </div>
      <div class="tableContent">
        <common-table :tableColumn="entData.tableColumn" :scrollbar-always-on="true" :tableData="entData.tableData" class="m-t-10" style="height: 30rem;">
          <template #action>
            <el-button type="primary" link>
              编辑
            </el-button>
          </template>
        </common-table>
      </div>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { checkOneDepartment, getDepartmentList } from '@/http/api/management/department';
import { IDepartmentList, IEmployeeList } from '@/modules/management/department';
import { ElTree } from 'element-plus';
import { onMounted, reactive, ref, watch } from 'vue';

const entData = reactive({
search: '',
id: 'department_id',
departmentList: [] as IDepartmentList[],
defaultProps: {
  children: 'children',
  label: 'department_name',
},
tableColumn: [
  {label: '姓名', prop: 'admin_name', type: 'default', width: '100px', align: 'left', template: 'text'},
  {label: '职位', prop: 'admin_position', type: 'default', width: '220px', align: 'left', template: 'text'},
  {label: '部门', prop: 'department_name', type: 'default', width: '230px', align: 'left', template: 'text'},
  {label: '联系方式', prop: 'admin_account', type: 'default', width: '200px', align: 'left', template: 'text'},
  {label: '加入时间', prop: 'create_time', type: 'default', width: '230px', align: 'left', template: 'text'},
  {label: '操作', prop: 'action', type: 'default', align: 'start', template: 'action', fixed: 'right'},
],
tableData: [] as IEmployeeList[]
})
const treeRef = ref<InstanceType<typeof ElTree>>()
const initData = async () => {
const result = await getDepartmentList()
entData.departmentList = result.data
console.log('result', result,entData.departmentList)
}
const getEmployeeList = async (id: string) => {
const employeeList = await checkOneDepartment({department_id:id,page:'1'})
entData.tableData = employeeList.data
console.log(employeeList)
}
const clickHandle = async (node:any, data:any) => {
console.log(node, data)
await getEmployeeList(data.department_id)
}
watch(() => entData.search, (val) => {
  treeRef.value!.filter(val)
},{
  deep: true
})

const filterNode = (value: string, data: IDepartmentList) => {
  if (!value) return true
  return data.department_name.includes(value)
}
onMounted(async() => {
await initData()
})

</script>

<style lang="scss" scoped>
.wrap {
display: flex;
background-color: #fff;

.leftPart {
  min-width: 16rem;
  min-height: 30rem;
  border-right: 1px solid lighten(gray, 40);

  .filter-tree {
    ::v-deep .el-tree-node__content {
      height: 2.9rem;
      position: relative;

    }
    ::v-deep .el-tree-node.is-current>.el-tree-node__content {
      border-right: 2px solid #1890ff;
      & .departmentItem {
        color: #1890ff;
        font-weight: bold;
      }
    }
    .departmentItem {
      width: 13rem;
      height: 2.5rem;
      display: flex;
      align-items: center;

      .icon {
        margin-right: 4px;
        content: url('@/assets/images/treeIcon.svg');
      }
      
      .ellipsis-col {
        position: absolute;
        right: 0.6rem;
        top: 24%;
      }
    }
  }
}

.rightPart {

  .tableContent {
    min-width: 50rem;
    position: relative;

    .pagination {
      position: absolute;
      bottom: -80px;
      right: 0;
    }

  }
}
}
</style>